<template>
  <header class="top-bar">
    <div class="subsystems">
      <button v-for="subsystem in subsystems" :key="subsystem" @click="$emit('change-subsystem', subsystem)">
        {{ subsystem }}
      </button>
    </div>
    <div class="top-right">
      <span id="tenant-name">当前租户</span>
      <div class="dropdown">
        <button class="dropbtn">⚙️</button>
        <div class="dropdown-content">
          <a href="#" @click.prevent="$emit('open-change-password')">修改密码</a>
          <a href="#" @click.prevent="$emit('logout')">退出</a>
        </div>
      </div>
      <button @click="toggleFullscreen">🔲</button>
    </div>
  </header>
</template>

<script>
export default {
  props: ['subsystems'],
  methods: {
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  }
};
</script>

<style scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 10px;
}

.subsystems button {
  margin-right: 10px;
}

.top-right {
  display: flex;
  align-items: center;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}
</style>